import React, { useEffect, lazy } from 'react';
import { useNavigate, useLocation, Outlet } from 'react-router-dom';

export interface MenuObj {
  path: string;
  name?: string;
  children?: MenuObj[];
  redirect?: {
    from: string;
    to: string;
  };
  component?: any;
}

const menuList: MenuObj[] = [
  {
    path: '/',
    component: lazy(() => import('utils/redirect')),
    redirect: {
      from: '/',
      to: '/home',
    },
    children: [
      {
        path: '/home',
        name: '首页',
        component: lazy(() => import('../App')),
        children: [
          {
            path: '/home/editorBlock',
            name: '写文章',
            component: lazy(() => import('pages/editorBlock/index')),
          },
          {
            path: '/home/blockList',
            name: '文章列表',
            component: lazy(() => import('pages/blockList/index')),
          },
          {
            path: '/home/components',
            redirect: {
              from: '/home/components',
              to: '/home/components/markdown',
            },
            component: lazy(() => import('components/index')),
            name: '组件列表',
            children: [
              {
                path: '/home/components/markdown',
                name: 'markdown组件',
                component: lazy(() => import('components/markdown/index')),
              },
              {
                path: '/home/components/tags',
                name: 'tag组件',
                component: lazy(() => import('components/tags/index')),
              },
              {
                path: '/home/components/collections',
                name: '分类组件',
                component: lazy(() => import('components/collections/index')),
              },
            ],
          },
        ],
      },
    ],
  },
];
export default menuList;
